<!-- 文件路径: src/components/MapPeopleDisplay.vue -->
<template>
  <div class="people-display-container">
    <!-- 人员控制面板 -->
    <div class="people-control-panel" v-if="showControlPanel">
      <h3>人员位置管理</h3>
      <div class="control-buttons">
        <button @click="addRandomPerson">添加随机人员</button>
        <button @click="clearAllPeople">清空所有人员</button>
        <button @click="toggleAnimation">{{ animationEnabled ? '停止' : '开始' }}动画</button>
      </div>
      
      <div class="people-list">
        <h4>当前人员 ({{ people.length }})</h4>
        <ul>
          <li v-for="person in people" :key="person.id">
            <span class="person-name">{{ person.name }}</span>
            <span class="person-position">({{ person.position[0].toFixed(4) }}, {{ person.position[1].toFixed(4) }})</span>
            <button @click="removePerson(person.id)" class="remove-btn">移除</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MapPeopleDisplay",
  props: {
    // 高德地图实例
    map: {
      type: Object,
      required: true
    },
    // 是否显示控制面板
    showControlPanel: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      people: [], // 人员列表
      personMarkers: [], // 人员标记
      animationEnabled: true, // 是否启用动画
      animationInterval: null, // 动画定时器
      personIcon: null // 人员图标
    };
  },
  mounted() {
    this.initPersonIcon();
    this.startAnimation();
  },
  beforeDestroy() {
    this.stopAnimation();
    this.clearAllPeople();
  },
  methods: {
    // 初始化人员图标
    initPersonIcon() {
      // 创建人员图标
      this.personIcon = new AMap.Icon({
        size: new AMap.Size(32, 32),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/person.png',
        imageSize: new AMap.Size(32, 32)
      });
    },
    
    // 添加人员到地图
    addPerson(personData) {
      const defaultPerson = {
        id: Date.now() + Math.floor(Math.random() * 1000), // 唯一ID
        name: `人员${this.people.length + 1}`,
        position: [108.94703, 34.25943], // 默认位置
        color: this.getRandomColor(), // 随机颜色
        ...personData
      };
      
      this.people.push(defaultPerson);
      this.drawPersonMarker(defaultPerson);
    },
    
    // 添加随机人员
    addRandomPerson() {
      const center = this.map.getCenter();
      // 在中心点附近随机生成位置
      const offsetLat = (Math.random() - 0.5) * 0.01;
      const offsetLng = (Math.random() - 0.5) * 0.01;
      
      this.addPerson({
        name: `人员${this.people.length + 1}`,
        position: [center.lng + offsetLng, center.lat + offsetLat]
      });
    },
    
    // 绘制人员标记
    drawPersonMarker(person) {
      if (!this.map) return;
      
      // 创建标记
      const marker = new AMap.Marker({
        position: person.position,
        title: person.name,
        icon: this.personIcon || undefined,
        offset: new AMap.Pixel(-16, -32),
        extData: {
          personId: person.id
        }
      });
      
      // 添加标签
      marker.setLabel({
        content: `<div class="person-label">${person.name}</div>`,
        offset: new AMap.Pixel(0, 0),
        direction: 'top'
      });
      
      // 添加到地图
      marker.setMap(this.map);
      
      // 添加点击事件
      marker.on('click', () => {
        this.onPersonClick(person);
      });
      
      // 保存标记引用
      this.personMarkers.push({
        id: person.id,
        marker: marker
      });
    },
    
    // 移除指定人员
    removePerson(personId) {
      // 从人员列表中移除
      const index = this.people.findIndex(p => p.id === personId);
      if (index !== -1) {
        this.people.splice(index, 1);
      }
      
      // 从地图上移除标记
      const markerIndex = this.personMarkers.findIndex(m => m.id === personId);
      if (markerIndex !== -1) {
        const markerObj = this.personMarkers[markerIndex];
        markerObj.marker.setMap(null);
        this.personMarkers.splice(markerIndex, 1);
      }
    },
    
    // 清空所有人员
    clearAllPeople() {
      // 清空人员列表
      this.people = [];
      
      // 清空地图上的所有标记
      this.personMarkers.forEach(markerObj => {
        markerObj.marker.setMap(null);
      });
      
      // 清空标记数组
      this.personMarkers = [];
    },
    
    // 人员点击事件
    onPersonClick(person) {
      // 创建信息窗口
      const infoWindow = new AMap.InfoWindow({
        content: `
          <div class="person-info-window">
            <h4>${person.name}</h4>
            <p>位置: ${person.position[0].toFixed(6)}, ${person.position[1].toFixed(6)}</p>
            <p>ID: ${person.id}</p>
          </div>
        `,
        offset: new AMap.Pixel(0, -30)
      });
      
      // 打开信息窗口
      infoWindow.open(this.map, person.position);
      
      // 触发自定义事件
      this.$emit('person-click', person);
    },
    
    // 开始动画
    startAnimation() {
      if (!this.animationEnabled) return;
      
      this.stopAnimation();
      this.animationInterval = setInterval(() => {
        this.updatePeoplePositions();
      }, 3000); // 每3秒更新一次位置
    },
    
    // 停止动画
    stopAnimation() {
      if (this.animationInterval) {
        clearInterval(this.animationInterval);
        this.animationInterval = null;
      }
    },
    
    // 切换动画状态
    toggleAnimation() {
      this.animationEnabled = !this.animationEnabled;
      if (this.animationEnabled) {
        this.startAnimation();
      } else {
        this.stopAnimation();
      }
    },
    
    // 更新人员位置（模拟移动）
    updatePeoplePositions() {
      if (!this.animationEnabled || this.people.length === 0) return;
      
      this.people.forEach(person => {
        // 随机移动一小段距离
        const moveLat = (Math.random() - 0.5) * 0.001;
        const moveLng = (Math.random() - 0.5) * 0.001;
        
        person.position[0] += moveLng;
        person.position[1] += moveLat;
        
        // 更新标记位置
        const markerObj = this.personMarkers.find(m => m.id === person.id);
        if (markerObj) {
          markerObj.marker.setPosition(person.position);
        }
      });
      
      // 触发位置更新事件
      this.$emit('positions-updated', this.people);
    },
    
    // 获取随机颜色
    getRandomColor() {
      const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7', '#dda0dd'];
      return colors[Math.floor(Math.random() * colors.length)];
    },
    
    // 批量设置人员位置
    setPeoplePositions(peopleData) {
      this.clearAllPeople();
      peopleData.forEach(person => {
        this.addPerson(person);
      });
    }
  }
};
</script>

<style scoped>
.people-display-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
}

.people-control-panel {
  background: rgba(0, 20, 40, 0.9);
  border: 1px solid #00aaff;
  border-radius: 8px;
  padding: 15px;
  color: #00ccff;
  min-width: 300px;
  max-height: 400px;
  overflow-y: auto;
}

.control-buttons {
  margin: 10px 0;
}

.control-buttons button {
  background: #0066cc;
  color: #00ccff;
  border: 1px solid #00aaff;
  border-radius: 4px;
  padding: 5px 10px;
  margin-right: 5px;
  cursor: pointer;
}

.control-buttons button:hover {
  background: #0088cc;
}

.people-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.people-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #003366;
}

.person-name {
  font-weight: bold;
  color: #00aaff;
}

.person-position {
  font-size: 12px;
  color: #00ccff;
}

.remove-btn {
  background: #cc3333;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 12px;
}

.remove-btn:hover {
  background: #ff3333;
}
</style>

<style>
/* 全局样式，用于地图上的人员标签 */
.person-label {
  background: rgba(0, 100, 200, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
}

.person-info-window {
  min-width: 200px;
}

.person-info-window h4 {
  margin: 0 0 10px 0;
  color: #0066cc;
}

.person-info-window p {
  margin: 5px 0;
  font-size: 14px;
}
</style>